<template>
  <div class="w-select-box flex items-center up-border u-input--radius">
    <slot name="icon"></slot>
    <div class="flex-1 w-0">
      <up-select
        :class="[props.modelValue && 'select-active']"
        :current="props.modelValue"
        :label="cmpLable"
        keyName="name"
        :options="props.list"
        @select="selectItem"
      ></up-select>
    </div>
  </div>
</template>
<script setup>
import { computed } from "vue";
const emit = defineEmits(["update:modelValue", "change"]);

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  list: {
    type: Array,
    default: () => [],
  },
  placeholder: {
    type: String,
    default: "请选择",
  },
  cKey: {
    type: String,
    default: "id",
  },
  labelKey: {
    type: String,
    default: "name",
  },
});

const cmpLable = computed(() => {
  if (props.modelValue && props.list.length) {
    let item = props.list.find((item) => item[props.cKey] == props.modelValue);
    return item[props.labelKey];
  }
  return props.placeholder;
});

function selectItem(item) {
  console.log(item[props.cKey], props.cKey);
  emit("update:modelValue", item[props.cKey]);
  emit("change", item);
}
</script>
<style lang="scss" scoped>
.w-select-box {
  height: 100%;
  width: 100%;
  padding: 6px 9px;
  border-radius: 4px;
  line-height: 26px;

  ::v-deep {
    .u-select {
      color: $uni-text-color-disable;
      display: flex;
      flex-direction: column;
    }
    .u-select__content {
      margin: auto 0;
    }
    .u-select__options__wrap {
      width: calc(100% + 44px);
      transform: translate(-34px, 10px);
    }
  }
}
.select-active {
  color: $uni-text-color !important;
}
</style>
